<template>
    <el-dialog v-model="drawer" title="文件分类创建" :append-to-body="true" @close="close" width="300px">
      <el-form :model="form" :rules="rules" size="small" ref="ruleRefForm" label-width="70px">
          <el-form-item label="分类名称" prop="label">
              <el-input v-model="form.name" placeholder="请输入" style="width:182px"></el-input>
          </el-form-item>
      </el-form>
      <template #footer>
          <el-row justify="center">
              <el-button size="small" type="primary" @click="submitForm(ruleRefForm)">提交</el-button>
              <el-button size="small" type="default" @click="cancelForm(ruleRefForm)">取消</el-button>
          </el-row>
      </template>
    </el-dialog>
  </template>
  
  <script>
  import { computed, reactive, toRefs, watch, ref } from 'vue'
  import { ElMessage } from 'element-plus'
  import api from '/@/api/commonApi'
  
  export default {
      name: 'ActiveClassifyCreate',
      props: {
          dialogDrawer: {
              type: Boolean,
              default: false
          },
          isEdit: {
              type: Boolean,
              default: false
          },
          defaultForm: {
              type: Object,
              default() {
                  return {}
              }
          }
      },
      emits: ['onSubmit', 'update:dialogDrawer'],
      setup(props, context) {
          const { dialogDrawer, isEdit, defaultForm } = toRefs(props)
          const drawer = computed({
              get: () => dialogDrawer.value,
              set: val => {
                  context.emit('update:dialogDrawer', val)
              }
          })
          const ruleRefForm = ref()
          watch(() => dialogDrawer.value,
              val => {
                  if(val) {
                      oneActivityType()
                      if (ruleRefForm.value) {
                          ruleRefForm.value.resetFields()
                      }
                      if(isEdit.value){
                          // 编辑状态
                          state.form = JSON.parse(JSON.stringify(defaultForm.value))
                      }
                  }
              }
          )
          const state = reactive({
              form: {
                  name: ''
              },
              rules: {
                  name: [{ required: true, message: '请输入分类名称', trigger: 'blur' }]
              },
              parentList: []
          })
          const reset = () => {
              state.form = {
                  leader: '0',
                  name: ''
              }
          }
          const submitForm = formEl => {
              if (!formEl) return
              formEl.validate(valid => {
                  if (valid) {
                      close()
                      if(isEdit.value){
                          api.editFileClass(state.form).then(res => {
                              ElMessage.success('编辑成功')
                          })
                      }else{
                          api.addFileClass(state.form).then(res => {
                              ElMessage.success('新建成功')
                          })
                      }
                      reset()
                      setTimeout(() => {
                          context.emit('onSubmit', true)
                      }, 500)
                  }
              })
          }
          const cancelForm = formEl => {
              if (!formEl) return
              formEl.resetFields()
              context.emit('update:dialogDrawer', false)
          }
          const close = () => {
              context.emit('update:dialogDrawer', false)
          }
          const oneActivityType = () => {
              api.fileClassList().then(res => {
                  state.parentList = res.data                
              })
          }
          return {
              drawer,
              close,
              submitForm,
              cancelForm,
              oneActivityType,
              ruleRefForm,
              ...toRefs(state)
          }
      }
  }
  </script>
  
  <style>
  
  </style>